<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    form {
      width: 500px;
      padding: 30px;
      border: 5px solid pink;
      border-radius: 15px;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    form > label {
      height: 50px;
      position: relative;
    }

    form > label > span {
      color: red;
      position: absolute;
      left: 20px;
      bottom: 5px;

      display: none;
    }
  </style>
</head>
<body>

  <form>
    <label>
      用户名: <input autocomplete="off" type="text" class="name" name="username">
      <span class="err">请按照规则填写用户名</span>
    </label>
    <label>
      密码: <input autocomplete="off" type="text" name="password">
      <span>请按照规则填写密码</span>
    </label>
    <label>
      手机号: <input autocomplete="off" type="text" name="phone">
      <span >请按照规则填写手机号</span>
    </label>
    <button>注册</button>
  </form>

  <script>

        // 用户名 a-z0-9A-Z_$    6-30
        // 密码 a-z0-9A-Z_$    6-30
        // 手机号+86 空格可有可无 11位手机号 第一位必须是1 第二位不能是1和2 剩余9位0-9



        // dom 获取元素  
        // 拿到用户输入的内容 
        // 操作元素的样式 
        
        // var inp = document.querySelector('.name');
        // var err = document.querySelector('.err');

        // var reg = /^[a-z0-9A-Z_$]{6,30}$/;

        // inp.onblur = function(){
        //     if(reg.test(this.value)){
        //         err.style.display = 'none'
        //     }
        //     else{
        //         err.style.display = 'block'
        //     }
        // }
        
        // 高内聚 低耦合  

        var regs = {
            'username':/^[a-z0-9A-Z_$]{6,20}$/,
            'password':/^[a-z0-9A-Z_$]{6,30}$/,
            'phone':/(\+86 ?)?1[3-9]\d{9}/
        }

        //拿到所有的输入框 
        //所有的span 
        // 绑定事件  
        var inps = [...document.querySelectorAll('form input')];
        // nextElementSibling
        inps.forEach(function(item){
            item.onblur = myfunc;
        });

        function myfunc(){
            // alert(this.value);
            //拿到输入的内容  
            var text = this.value;

            // 每个输入框的name 作为键 到regs对象中 获取正则  
            var reg = regs[this.name];

            if(reg.test(text)){
                this.nextElementSibling.style.display = 'none';
            }else{
                this.nextElementSibling.style.display = 'block';
            }

        }


  </script>
    
  </body>
  </html>
  